<div>
    <div>
        <div style="height:33px;font-size:22px;">
            {{$t('逻辑')}}
            <div style="float:right">
                <Dropdown transfer trigger="click" @on-click="toggleUI" placement="bottom-start">
                    <i-button size="small" type="text">
                        <Icon type="ios-list"></Icon>
                    </i-button>
                    <template #list>
                        <DropdownMenu>
                            <DropdownItem name="stateGroup">
                                <Icon type="md-checkmark" :color="UICheckColor('stateGroup')" />{{$t('状态组')}}
                            </DropdownItem>
                            <DropdownItem name="actionGroup">
                                <Icon type="md-checkmark" :color="UICheckColor('actionGroup')" />{{$t('行为组')}}
                            </DropdownItem>
                            <DropdownItem name="structGroup">
                                <Icon type="md-checkmark" :color="UICheckColor('structGroup')" />{{$t('数据结构组')}}
                            </DropdownItem>
                            <DropdownItem name="functionGroup">
                                <Icon type="md-checkmark" :color="UICheckColor('functionGroup')" />{{$t('函数组')}}
                            </DropdownItem>
                        </DropdownMenu>
                    </template>
                </Dropdown>
            </div>
            <Dropdown trigger="click" @on-click="changeEnv" placement="bottom-start">
                <a href="javascript:void(0)" style="font-size:15px;margin-left:15px;">
                    <SceneIcon v-if="isScene" :name="currentSceneName()" nameOf="sceneName"></SceneIcon>
                    {{currentSceneName()}}
                    <Icon type="ios-arrow-down"></Icon>
                </a>
                <template #list>
                    <DropdownMenu style="width:200px">
                        <DropdownItem name="">{{$t('全部')}}<span
                                style="float:right;color:black">{{allDisplayableSrcCnt()}}</span>
                        </DropdownItem>
                        <template v-for="(s,j) of SceneManager.scenes" :key="s.id">
                            <DropdownItem v-if="!isHiddenScene(s)" :divided="j==0" :style="{backgroundColor:s.color}"
                                :name="'scene/'+s.id">
                                <span :style="{color:$toFontColor(s.color)}">
                                    {{s.name}}
                                </span>
                                <span :style="{float:'right',color:$toFontColor(s.color)}">
                                    {{srcCntOfScene(s)}}
                                </span>
                            </DropdownItem>
                        </template>
                        <template v-for="(e,j) of env" :key="e.name">
                            <DropdownItem v-if="notEmptyEnv(e) && !isHiddenEnv(e.name)" :name="e.name?'env/'+e.name:' '"
                                :divided="j==0">
                                {{$t(e.name
                                ||
                                '通用')}}<span style="float:right;color:black">{{e.srcCnt}}</span>
                            </DropdownItem>
                        </template>
                    </DropdownMenu>
                </template>
            </Dropdown>

            <Dropdown v-if="currentScene && currentScene.startsWith('scene/')" trigger="click" @on-click="setEntry"
                placement="bottom-start">
                <a href="javascript:void(0)" style="font-size:15px;margin-left:15px;">
                    {{getEntry() || $t('未设定入口')}}
                    <Icon type="ios-arrow-down"></Icon>
                </a>
                <template #list>
                    <DropdownMenu style="max-height:300px;overflow-y:auto;">
                        <DropdownItem v-for="name of FSMNamesInScene(currentScene)" :name="name">{{name}}</DropdownItem>
                    </DropdownMenu>
                </template>
            </Dropdown>

            <tooltip :content="$t('新建模块')" :delay="1000" theme="light">
                <i-button size="small" style="margin-left:15px;" @click="newModule">
                    <icon type="md-add"></icon>
                </i-button>
            </tooltip>
            <tooltip :content="$t('导入模块')" :delay="1000" theme="light">
                <i-button size="small" style="margin-left:15px;" @click="loadFiles">
                    <icon type="ios-cloud-upload-outline"></icon>
                </i-button>
            </tooltip>
        </div>
        <collapse>
            <TransitionGroup name="block">
                <template v-for="f in filteredSrc(currentScene)" :key="f.name">
                    <panel class="ns">
                        <span>
                            {{f.name}}<SceneIcon :name="f.name" size="20" nameOf="moduleName"></SceneIcon>
                            <span style="float:right;margin-right:20px;">
                                <tooltip v-if="$root.editorSettings.checkUIEnabled('exportModule')"
                                    :content="$t('导出模块源码')" :delay="1000" theme="light">
                                    <icon type="ios-cloud-download-outline" @click.stop="saveSrcFile(f)"></icon>
                                </tooltip>

                                <tooltip :content="$t('模块属性')" :delay="1000" theme="light">
                                    <icon size="20" type="ios-create-outline" @click.stop="editSrc(f)"></icon>
                                </tooltip>
                                <tooltip :content="$t('删除模块')" :delay="1000" theme="light">
                                    <Poptip trigger="click" @on-ok="unloadFile(f)" confirm transfer :title="$t('删除')">
                                        <a class="delete">
                                            <Icon size="20" type="ios-trash-outline" />
                                        </a>
                                    </Poptip>
                                </tooltip>
                            </span>
                        </span>
                        <template #content>
                            <div style="display:inline-block;margin-top:-5px;">
                                <div style="display: block;float:left;">
                                    <TransitionGroup name="block">
                                        <card class="logicCard" v-for="fsm in f.fsms" :key="fsm.name">
                                            <template #title>
                                                <p class="ns">
                                                    <icon type="ios-body"></icon>
                                                    {{fsm.name}}
                                                </p>
                                            </template>
                                            <template #extra>
                                                <span>
                                                    <tooltip :content="$t('状态机构建关系')" :delay="1000" theme="light">
                                                        <icon size="20" type="ios-color-filter-outline"
                                                            @click="showFSMCreateTree(f.name,fsm.name)"></icon>
                                                    </tooltip>
                                                    <tooltip :content="$t('状态转换概览')" :delay="1000" theme="light">
                                                        <icon size="20" type="md-git-compare"
                                                            @click="showStateTransition(f,fsm)">
                                                        </icon>
                                                    </tooltip>
                                                    <tooltip :content="$t('重命名')" :delay="1000" theme="light">
                                                        <icon size="20" type="ios-create-outline"
                                                            @click="renameFSM(f,fsm)">
                                                        </icon>
                                                    </tooltip>
                                                    <tooltip :content="$t('删除')" :delay="1000" theme="light">
                                                        <icon size="20" type="ios-trash-outline"
                                                            @click="removeFSM(f,fsm)">
                                                        </icon>
                                                    </tooltip>
                                                </span>
                                            </template>
                                            <div style="height:170px;">
                                                <div v-if="$root.editorSettings.checkUIEnabled('stateGroup')"
                                                    :class="$root.editorSettings.checkUIEnabled('actionGroup')?'statelist':'statelist large'">
                                                    <TransitionGroup name="block">
                                                        <div v-for="(state,index) in fsm.states"
                                                            style="width:100%;font-size: 16px;" :key="state.name">
                                                            <a @click="openState(f,fsm,state)">
                                                                <icon type="md-clock"></icon>
                                                                {{state.name}}
                                                            </a>
                                                            <span style="float:right;">
                                                                <tooltip v-if="index!=0" :content="$t('设定为初始状态')"
                                                                    :delay="1000" theme="light">
                                                                    <icon type="ios-flag-outline"
                                                                        @click="setStartState(fsm,state)">
                                                                    </icon>
                                                                </tooltip>
                                                                <tooltip v-if="index==0" :content="$t('初始状态')"
                                                                    :delay="1000" theme="light">
                                                                    <icon type="ios-flag"></icon>
                                                                </tooltip>
                                                                <tooltip :content="$t('重命名')" :delay="1000"
                                                                    theme="light">
                                                                    <icon size="20" type="ios-create-outline"
                                                                        @click="renameState(fsm,state)">
                                                                    </icon>
                                                                </tooltip>
                                                                <tooltip :content="$t('删除')" :delay="1000"
                                                                    theme="light">
                                                                    <icon size="20" type="ios-trash-outline"
                                                                        @click="removeFSMState(fsm,state)">
                                                                    </icon>
                                                                </tooltip>
                                                            </span>
                                                        </div>
                                                    </TransitionGroup>
                                                    <div style="width:100%;font-size: 16px;" @click="addFSMState(fsm)">
                                                        <a class="addBtn">
                                                            <icon type="ios-add-circle-outline"
                                                                style="padding-left:20px;">
                                                            </icon>{{$t('添加状态')}}
                                                        </a>
                                                    </div>
                                                </div>
                                                <div v-if="!$root.editorSettings.checkUIEnabled('stateGroup')">
                                                    <a @click="openState(f,fsm,fsm.states[0])">
                                                        <icon type="md-clock"></icon>
                                                        {{fsm.states[0].name}}
                                                    </a>
                                                </div>
                                                <div v-if="$root.editorSettings.checkUIEnabled('actionGroup')">
                                                    <Divider
                                                        v-if="$root.editorSettings.checkUIEnabled('actionGroup')&&$root.editorSettings.checkUIEnabled('stateGroup')"
                                                        size="small" dashed
                                                        style="margin-top: 3px;margin-bottom: 3px;" />
                                                    <div
                                                        :class="$root.editorSettings.checkUIEnabled('stateGroup')?'actionlist':'actionlist large'">
                                                        <TransitionGroup>
                                                            <div v-for="(actiongroup,index) in fsm.functions"
                                                                style="width:100%;font-size: 16px;"
                                                                :key="actiongroup.name">
                                                                <a @click="openActionGroup(f,fsm,actiongroup)">
                                                                    <icon type="md-bicycle"></icon>
                                                                    {{actiongroup.name}}
                                                                </a>
                                                                <span style="float:right;">
                                                                    <tooltip :content="$t('重命名')" :delay="1000"
                                                                        theme="light">
                                                                        <icon size="20" type="ios-create-outline"
                                                                            @click="renameActionGroup(fsm,actiongroup)">
                                                                        </icon>
                                                                    </tooltip>
                                                                    <Poptip confirm :title="$t('删除')" :delay="1000"
                                                                        theme="light"
                                                                        @on-ok="removeActionGroup(fsm,index)">
                                                                        <icon size="20" type="ios-trash-outline">
                                                                        </icon>
                                                                    </Poptip>
                                                                </span>
                                                            </div>
                                                        </TransitionGroup>
                                                        <div style="width:100%;font-size: 16px;"
                                                            @click="addFSMActionGroup(fsm)">
                                                            <a class="addBtn">
                                                                <icon type="ios-add-circle-outline"
                                                                    style="padding-left:20px;">
                                                                </icon>{{$t('添加行为组')}}
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </card>
                                        <card class="logicCard">
                                            <template #title>
                                                <a class="ns" style="line-height:20px;" @click="addFSM(f)">
                                                    <icon type="ios-body"></icon>
                                                    {{$t('状态机类型')}}
                                                </a>
                                            </template>
                                            <div class="statelist" style="height:170px;padding-top:30px;"
                                                @click="addFSM(f)">
                                                <icon type="ios-add-circle-outline" size="80"
                                                    style="margin: auto;display: block;"></icon>
                                            </div>
                                        </card>
                                    </TransitionGroup>
                                </div>
                                <div v-if="$root.editorSettings.checkUIEnabled('structGroup')"
                                    style="display: inline-block;">
                                    <TransitionGroup name="block">
                                        <card class="logicCard" style="width:200px;" v-for="struct in f.structs"
                                            :key="struct.name">
                                            <a @click="openStruct(f,struct)">
                                                <icon type="logo-codepen"></icon>
                                                {{struct.name}}
                                            </a>
                                            <span style="float:right;margin-right:10px;">
                                                <tooltip :content="$t('下载模板')" :delay="1000" theme="light">
                                                    <icon size="20" type="ios-code-download"
                                                        @click="downloadTemplate(f,struct)">
                                                    </icon>
                                                </tooltip>
                                                <tooltip :content="$t('重命名')" :delay="1000" theme="light">
                                                    <icon size="20" type="ios-create-outline"
                                                        @click="renameStruct(f,struct)">
                                                    </icon>
                                                </tooltip>
                                                <tooltip :content="$t('删除')" :delay="1000" theme="light">
                                                    <icon size="20" type="ios-trash-outline"
                                                        @click="removeStruct(f,struct)">
                                                    </icon>
                                                </tooltip>
                                            </span>
                                        </card>
                                        <card class="logicCard" style="width:200px;">
                                            <a @click="addStruct(f)">
                                                <icon type="ios-add-circle-outline"></icon>
                                                {{$t('数据结构组')}}
                                            </a>
                                        </card>
                                    </TransitionGroup>
                                </div>
                                <div v-if="$root.editorSettings.checkUIEnabled('functionGroup')"
                                    style="display: inline-block;">
                                    <TransitionGroup name="block">
                                        <card class="logicCard" style="width:200px;" v-for="func in f.functions"
                                            :key="func.name">
                                            <a @click="openFunction(f,func)">
                                                <icon type="md-calculator"></icon>
                                                {{func.name}}
                                            </a>
                                            <span style="float:right;margin-right:10px;">
                                                <tooltip :content="$t('重命名')" :delay="1000" theme="light">
                                                    <icon size="20" type="ios-create-outline"
                                                        @click="renameFunction(f,func)">
                                                    </icon>
                                                </tooltip>
                                                <tooltip :content="$t('删除')" :delay="1000" theme="light">
                                                    <icon size="20" type="ios-trash-outline"
                                                        @click="removeFunction(f,func)">
                                                    </icon>
                                                </tooltip>
                                            </span>
                                        </card>
                                        <card v-if="$root.editorSettings.checkUIEnabled('functionGroup')"
                                            class="logicCard" style="width:200px;">
                                            <a @click="addFunction(f)">
                                                <icon type="ios-add-circle-outline"></icon>
                                                {{$t('函数组')}}
                                            </a>
                                        </card>
                                    </TransitionGroup>
                                </div>
                            </div>
                        </template>
                    </panel>
                </template>
            </TransitionGroup>
        </collapse>
    </div>
    <template v-if="showSrcEditWindow">
        <Modal :mask="false" :title="$t('模块属性')" v-model="showSrcEditWindow" scrollable draggable>
            <div style="color:red;">
                {{editingSrc.warning}}
            </div>
            <i-Form :model="editingSrc" :label-width="80" @submit.native.prevent>
                <FormItem prop="name" :label="$t('名称')">
                    <i-input v-model="editingSrc.name" :placeholder="$t('输入名称')" clearable style="width: 200px"
                        @on-change="checkName" />
                </FormItem>
                <FormItem prop="depends" :label="$t('依赖')">
                    <CheckboxGroup v-model="editingSrc.depends">
                        <div style="margin-top:5px;">
                            <Checkbox
                                v-for="m of availableModule(editingSrc.src.name,editingSrc.env,scenesOfEditingSrc)"
                                :label="m">
                                {{m}}
                            </Checkbox>
                        </div>
                        <div>
                            <Checkbox v-for="m of unavalibleModule(editingSrc.src.name,editingSrc.env)" :label="m.name"
                                disabled>{{m.name}}:{{m.reason}}</Checkbox>
                        </div>
                    </CheckboxGroup>
                </FormItem>
                <FormItem :label="$t('环境')">
                    <div style="margin-top:5px;">
                        <Checkbox :label="$t('通用')" @on-change="setUniversal" v-model="isUniversal">
                            {{$t('通用')}}</Checkbox>
                    </div>
                    <div>
                        <CheckboxGroup v-model="editingSrc.env">
                            <template v-for="e of env">
                                <Checkbox v-if="e.name" :label="e.name">{{$t(e.name)}}</Checkbox>
                            </template>
                        </CheckboxGroup>
                    </div>
                </FormItem>
                <FormItem :label="$t('场景')">
                    <div>
                        <CheckboxGroup v-model="scenesOfEditingSrc">
                            <template v-for="e of SceneManager.scenes">
                                <Checkbox :label="e.id"
                                    :disabled="editingSrc.env.length>0 && editingSrc.env.indexOf(e.env)<0">
                                    <span class="sceneColor" :style="{backgroundColor:e.color}"></span>{{e.name}}
                                </Checkbox>
                            </template>
                        </CheckboxGroup>
                    </div>
                </FormItem>
            </i-Form>
            <template #footer>
                <div style="text-align:end;">
                    <i-button type="default" size="large" @click="cleanEditingSrc">{{$t('取消')}}</i-button>
                    <i-button type="primary" size="large" @click="submitEditingSrc">{{$t('确定')}}</i-button>
                </div>
            </template>
        </Modal>
    </template>
    <template v-if="showChart">
        <modal :title="chartWindowTitle" width="700" :closable="false" :mask="false" :mask-closable="false"
            :draggable="true" v-model="showChart">
            <div ref="chart" class="StateTransitionChart"></div>
            <template #footer>
                <div style="text-align:end;">
                    <i-button type="primary" size="small" @click="clear">{{$t('关闭')}}</i-button>
                </div>
            </template>
        </modal>
    </template>
    <template v-if="showExportTemplateExcelWindow">
        <modal :title="$t('导出模板')" v-model="showExportTemplateExcelWindow" @on-ok="downloadTemplateByOpt">
            <CheckboxGroup v-model="structNamesToExportTemplateExcel">
                <template v-for="name in allStructNamesToExportTemplateExcel">
                    <Checkbox :label="name" :disabled="prebuildExportTemplateExcel.indexOf(name)<0">
                        <Icon type="logo-codepen"></Icon>
                        <span>{{name}}</span>
                        <span v-if="prebuildExportTemplateExcel.indexOf(name)<0" style="margin-left:5px;">{{
                            $t('不满足导出模板要求')}}</span>
                    </Checkbox><br />
                </template>
            </CheckboxGroup>
            <p style="margin-top:10px;color:chocolate;font-size:13px;">{{ $t('数据结构必须包含名称为id、类型为整数的属性。')}}</p>
        </modal>
    </template>
</div>